<script>
import {ref} from 'vue';
import cardDemo from "/src/components/cardDemo.vue"
import btn_1 from "/src/components/UserPageBtn_1.vue"
import btn_2 from "/src/components/UserPageBtn_2.vue"
import followerItem from '/src/components/followerItem.vue'
import appraiseDialog from './components/appraiseDialog.vue';
import MessBlank_4 from './components/MessBlank_4.vue';
import img1 from "/src/assets/avatar.jpg"
import icon from "/src/assets/icon.png"
import axios from "axios";
import {ElMessage} from "element-plus";


export default {
  components:{cardDemo,btn_1,btn_2,followerItem,appraiseDialog,MessBlank_4},
  mounted() {
    this.pageID = this.$route.query.id;
    const userData = JSON.parse(sessionStorage.getItem('token'));
    this.token = userData.token;
    this.userID = userData.userID;
    axios.defaults.headers.common['Authorization'] = `${this.token}`;

    // 获取个人信息
    const response = axios.get('http://localhost:8080/users/'+this.pageID);
    response.then((result) =>{
      this.username = result.data.UName;
      this.followNum = result.data.IdolNum;
      this.score = result.data.Credit/20;
      this.avatar = result.data.ProfilePhoto
      if(result.data.IfSubscribe === 0){
        this.isMine = true;
        this.btnComponent = 'btn_1';
      }
      else if(result.data.IfSubscribe === 1){
        this.isFollowed = true;
        this.btnComponent = 'btn_2';
      }
      else{
        this.isFollowed = false;
        this.btnComponent = 'btn_2';
      }
    }).catch((error) => {
      console.log(error);
    });
    // 获取关注列表
    const response_1 = axios.get('http://localhost:8080/focus/list');
    response_1.then((result) =>{
      if(result.data !== null){
        this.followList = result.data;
      }
    }).catch((error) => {
      console.log(error);
    });

    //获取文章列表
    const response_2 = axios.get('http://localhost:8080/passageList/user/'+this.pageID);
    response_2.then((result) =>{
      this.passageList = result.data.PassageList;
    }).catch((error) => {
      console.log(error);
    });

    //获取详细评价
    const response_3 = axios.get('http://localhost:8080/adopt/application/getevaluationbyuser/'+this.pageID);
    response_3.then((result) =>{
      console.log("result",result);
      this.scoreavg = result.data.scoreavg;
      const applyuser = result.data.applyuser || [];
      const promotuser = result.data.promotuser || [];

              // 合并 applyuser 和 promotuser 为一个评价列表
              this.messList = [
              ...applyuser.map(user => ({
                uname: user.uname,
                uavatar: user.uavatar,
                ucomment: user.ucomment,
                identity: '送养者' // applyuser 是领养者
              })),
              ...promotuser.map(user => ({
                uname: user.uname,
                uavatar: user.uavatar,
                ucomment: user.ucomment,
                identity: '领养者' // promotuser 是送养者
              }))
              ];
              console.log("messlist：",this.messList);
    }).catch((error) => {
      console.log(error);
    });
  },
  data(){
    return {
      img1,icon,
      isMine:ref(null),     //是否为个人主页
      followNum:ref(null),  // 关注数量
      followList:ref(null), //关注列表
      input:ref(''),  // 搜索框输入
      score:ref(null),  // 评分
      avatar:ref(null),
      btnComponent:ref(null),
      followerDialogVisible:ref(false),
      isFollowed:ref(true),   //是否已关注
      isCommentVisible:ref(false),
      username:ref(''),
      token:ref(''),
      userID:ref(0),
      pageID:ref(0), //该界面的用户id
      passageList:ref(null) ,//用户文章列表
      scoreavg: 0, // 平均分
      messList:[], // 申请者评价列表
    
    }
  },
  methods:{
    // 搜索点击
    searchClick(){
      if(this.input === ''){
        ElMessage({
          message: '请输入搜索关键字',
          type: 'error',
          style: 'font-size:25px;font-weight:bold;',
          center: true,
          offset: 55,
          duration:1200
        })
      }
      else{
        // 获取搜索内容
        const response = axios.get('http://localhost:8080/search/userPage/'+this.input+'/'+this.pageID);
        response.then((result) =>{
          this.passageList = result.data.PassageList;
        }).catch((error) => {
          console.log(error);
        });
      }
    },
    discoverClick(){
      this.$router.push('/MainPage');
    },
    adoptClick(){
      this.$router.push('/AdoptPage');
    },
    msgClick(){
      this.$router.push('/Message/like');
    },
    postClick(){
      this.$router.push('/PostPage');
    },
    // 查看详细评价
    commentClick(){
      this.isCommentVisible = !this.isCommentVisible;
    },
    followerClick(){
      this.followerDialogVisible = true;
    },
    dialogClose(){
      // 获取个人信息
      const response = axios.get('http://localhost:8080/users/'+this.pageID);
      response.then((result) =>{
        this.username = result.data.UName;
        this.followNum = result.data.IdolNum;
        this.score = result.data.Credit/20;
        if(result.data.IfSubscribe === 0){
          this.isMine = true;
          this.btnComponent = 'btn_1';
        }
        else if(result.data.IfSubscribe === 1){
          this.isFollowed = true;
          this.btnComponent = 'btn_2';
        }
        else{
          this.isFollowed = false;
          this.btnComponent = 'btn_2';
        }
      }).catch((error) => {
        console.log(error);
      });
    },
    dialogOpen(){
      // 获取关注列表
      const response_1 = axios.get('http://localhost:8080/focus/list');
      response_1.then((result) =>{
        if(result.data !== null){
          this.followList = result.data;
        }
      }).catch((error) => {
        console.log(error);
      });
    },
    updateHandle(){
      location.reload();
    }
  },
}
</script>

<template>
  <div class="layout" style="height:100vh;">
    <el-container >
      <el-header class="header" >
        <el-row
            justify="space-between"
            style="padding-top: 10px;
              padding-bottom: 10px">

          <img :src="icon"
               style="width:55px;height:55px;"
               alt=""/>

        </el-row>
      </el-header>

      <el-container>
        <el-aside>
          <el-menu
              active-text-color="#FFD466"
              style=""
          >
            <el-menu-item class="aside" index="1" @click="discoverClick">
              <el-icon :size="25" style="margin-right:10px;"><House /></el-icon>
              <span>发现</span>
            </el-menu-item>
            <el-menu-item class="aside" index="2" @click="adoptClick">
              <el-icon :size="25" style="margin-right:10px;"><Star /></el-icon>
              <span>领养</span>
            </el-menu-item>
            <el-menu-item class="aside" index="3" @click="msgClick">
              <el-icon :size="25" style="margin-right:10px;"><Message /></el-icon>
              <span>消息</span>
            </el-menu-item>
            <el-menu-item class="aside" index="4" @click="postClick">
              <el-icon :size="25" style="margin-right:10px;"><CirclePlus /></el-icon>
              <span>发布</span>
            </el-menu-item>
          </el-menu>


        </el-aside>


        <el-container>
          <el-header style="height:140px; margin-left:45px;margin-top: 30px;width:94%">
            <div style="display: flex;flex-direction: row;">
              <el-avatar
                  :class="'avatar'"
                  :src="this.avatar"
                  :fit="'cover'"
                  :shape="'circle'"
                  :size="130"
                  style="margin-right: 15px;cursor:default;"
              />
              <div style="display: flex; flex-direction: column;align-items: flex-start;justify-content:center;margin-right: 10px;margin-bottom: 15px;">
                <span style="font-size:45px;font-weight: bold;margin: 15px 0 10px 5px;">{{ this.username }}</span>
                <span v-if="this.isMine" class="follower" @click="followerClick">关注&nbsp;&nbsp;{{followNum}}</span>
              </div>
              <el-divider direction="vertical" style="height:120px;border-color:#A6A6A6;margin:10px 15px 0 15px;"/>
              <div style="display: flex;flex-direction: column;align-items: flex-start;margin-top:25px;margin-bottom: auto;">
                <div style="display: flex;flex-direction: row;align-items: baseline">
                  <div style="font-size:30px;margin-right:5px;">信用评级</div>
                  <div>
                    <label class="checkComment"
                           @click="commentClick">
                      查看详细评价
                    </label>
                  </div>

                </div>
                <el-rate
                    v-model="scoreavg"
                    disabled
                    size="large"
                    text-color="#ff9900"
                    style="--el-rate-icon-margin: 0px;--el-rate-icon-size: 45px;margin-top: 10px;"
                />
              </div>
              <component :is="btnComponent" :Followed="this.isFollowed" :pageID="this.pageID"></component>
            </div>

          </el-header>

          <!--搜索框-->
          <el-header style="height:50px;margin-left: 45px;margin-top: 5px;">
            <div class="InputContainer">
              <input @keyup.enter="searchClick" type="text" name="text" v-model="this.input" class="input" id="input" placeholder="发现更多……" autocomplete="off">
              <button class="searchBut" @click="searchClick"><svg viewBox="0 0 530 530" class="searchIcon"><path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"></path></svg>
              </button>
            </div>
          </el-header>

          <!--关注列表-->
          <el-dialog v-model="followerDialogVisible" @open="dialogOpen" @close="dialogClose" width="400" height="400" center>
            <div style="display: flex;flex-direction: column;margin-left:10px;gap:15px;">
              <div style="display: flex;flex-direction: row;">
                <el-avatar
                    :class="'avatar'"
                    :src="this.avatar"
                    :fit="'cover'"
                    :shape="'circle'"
                    :size="100"
                    style="margin-right: 15px;cursor: none;"
                />
                <div style="display: flex; flex-direction: column;align-items: flex-start;margin-right: 10px;color:black;">
                  <span style="font-size:35px;font-weight: bold;margin: 13px 0 10px 5px;">Aprillll</span>
                  <span style="font-size:15px;margin-left:5px;">关注 {{followNum}}</span>
                </div>
              </div>

              <el-scrollbar max-height="350px">
                <div style="display: flex;flex-direction: column;gap: 10px;">
                  <follower-item
                      v-for="(item,index) in this.followList"
                      :key="index"
                      :item="item"
                      :token="this.token">
                  </follower-item>

                </div>
              </el-scrollbar>
            </div>
          </el-dialog>

          <!--查看评价-->
          <el-dialog
              v-model="isCommentVisible"
              width="410px"
          >
            <el-row :align="middle">
              <!-- A部分: 头像和昵称在同一水平线上 -->
              <el-row :span="8" style="display: flex; align-items: center; margin-left: 10px;">
                <el-avatar :src="this.avatar" :size="60" style="margin-bottom: 7px; margin-right:12px" />
                <el-text tag="b"  style="margin-right:0;font-size: 25px;">{{ username }}</el-text>
              </el-row>

              <!-- 垂直分割线 -->
              <el-divider
                  direction="vertical"
                  style="width: 2px; height: 80px; margin-left:auto"
              />

              <!-- B部分: 信用评级和评分条在同一竖直线上 -->
              <el-col :span="12">
                <el-row :span="8" style="display: flex; align-items: center; margin-left: 5px; margin-top: 10px;">
                  <!-- 垂直排列的信用评级和评分条 -->
                  <el-text size="large" style="margin-left: 0;">信用评级</el-text>
                  <el-rate
                  
                      v-model="scoreavg"
                      disabled
                      show-score
                      text-color="#ff9900"
                      score-template="{value} 分"
                      style="--el-rate-icon-size: 25px;"
                  />
                </el-row>
              </el-col>
            </el-row>

            <!-- 下方动态插入MessBlank_4 -->
            <MessBlank_4
            v-for="(mess, index) in messList"
                :key="index"
                :userName="mess.uname"
                :userAvatar="mess.uavatar"
                :comment="mess.ucomment"
                :identity="mess.identity"
            />

          </el-dialog>

          <!--文章部分-->
          <el-main  class="mainPage">
            <el-row style="justify-content: start;gap:15px;margin-left:45px;">
              <cardDemo
                  v-for="passage in passageList"
                  :key="passage.PassageID"
                  :passage="passage"
                  :token="this.token"
                  :deleteAble="this.isMine"
                  @update="updateHandle"
              />
            </el-row>

          </el-main>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>


<style scoped>
/deep/ .el-rate__icon {
  font-size: 35px; /* 设置星星图标的大小 */
}
.el-menu{
  border:0!important;
}
/*header样式*/
.header{
  /*background-color:black;*/
  height:60px;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
}
/*关注样式*/
.follower{
  font-size:15px;
  margin-left:5px;
  cursor: pointer;
}
.follower:hover{

  color:#FFD466;
}

/*查看详细评价样式*/
.checkComment{
  font-size:15px;
  text-decoration: underline;
  cursor: pointer;
  margin-top:1px;
}
.checkComment:hover{
  color:#FFD466;
}
/*搜索框样式*/
.InputContainer {
  height: 40px;
  width:250px;
  margin-top:5px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgb(255, 255, 255);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  padding-left: 15px;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.075);
}
.input {
  width: 200px;
  height: 100%;
  border: none;
  outline: none;
  font-size: 15px;
  caret-color: black;
}
.searchIcon {
  margin-top:3px;
  width: 12px;
}
.searchBut {
  padding: 0 15px 0 12px;
  border: none;
  background-color: transparent;
  height: 40px;
  width:50px;
  cursor: pointer;
  transition-duration: .3s;
}
.searchBut:hover {
  background-color: #FFE9B2;
  transition-duration: .3s;
}

/*aside*/
.el-aside{
  margin-left: 10px;
  width:180px;
  height:calc(100vh - 70px);
  padding-top:26vh;
}
.aside{
  height:65px;
  font-size:18px;
  font-weight:bold;
  display: flex;
  justify-content: center;
  align-items: center;
}
::v-deep(.aside:hover) {
  background-color: #FFE9B2;
}

/*主页面*/
.mainPage{
  height:50vh;
}

.el-divider--vertical {
  height: 3em;
  border-width: 1px;
  border-color: black;
}
</style>


